<template>
	<view class="kind">
		<view class="pageHeader dFlex jStart_aCenter" :style="{'height': pageHeader + 'px','padding-top': pageStatus + 'px'}">
			<view class="search">
				<input type="text" v-model='kw' @input="initKindShop" placeholder="请输入关键字搜索">
				<u-icon class='clearable' @click='kw="";page=1;initKindShop()' name="close-circle-fill" size='32' color='#666666'></u-icon>
			</view>
		</view>
		<view class="container dFlex jStart_aStart" :style="'height:'+(mainHeight - 12)+'px;'">
			<view class="zhonglei">
				<view @click="change_firstKind(item)" :class="['kindOne',item.id == sel_firstKind.id ? 'actKind' : '']" v-for="(item,index) in kindList" :key='item.id'>{{item.name}}</view>
			</view>
			<scroll-view class="content" :scroll-y='true' :show-scrollbar='false' @scrolltolower='loadMore'>
				<view :class="['tools','dFlex','jBetween_aStart',kindFlag?'showAll':'']">
					<view class="toolList">
						<view @click="change_secondKind('')" :class="['fenlei',!sel_secondKind.id ? 'actFL' : '']">全部</view>
						<view @click="change_secondKind(item)" :class="['fenlei',item.id == sel_secondKind.id ? 'actFL' : '']" v-for="(item,index) in sel_firstKind.twoCategory" :key='index'>{{item.name}}</view>
					</view>
					<view class="arrowIcon imgPublic dFlex jCenter_aCenter" @click='kindFlag = !kindFlag'>
						<u-icon v-if='!kindFlag' name="arrow-up" size="28"></u-icon>
						<u-icon v-if='kindFlag' name="arrow-down" size="28"></u-icon>
					</view>
				</view>
				<view class="sortTool dFlex jAround_aCenter">
					<view :class="['sortOne',orderby =='normal'?'actSort':'']" @click="changeSort('normal')">综合</view>
					<view :class="['sortOne',orderby =='salenum'?'actSort':'']" @click="changeSort('salenum')">销量</view>
					<view :class="['sortOne',orderby =='price'?'actSort':'']" @click="changeSort('price')">价格</view>
				</view>
				<view class='shops'>
					<view class="shopOne dFlex jStart_aStart" v-for="(item,index) in shops" :key='index' @tap='lookDetail(item.id,0)'>
						<view class="shopImg imgPublic">
							<image :src="item.main_img" mode="widthFix"></image>
							<view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
								<view class='showYJ'>佣</view>
								<text>{{(parseFloat(item.min_price) * parseFloat(item.service_rate) / 100).toFixed(2)}}</text>
							</view>
						</view> 
						<view class="shopInfo">
							<view class="name">{{item.title}}</view>
							<view class="haoping">{{item.salenum}}人下单</view>
							<view class="prices dFlex jBetween_aCenter">
								<view class="price">￥<text>{{item.min_price}}</text></view>
								<!-- <view class="addCarIcon imgPublic">
									<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_add.png" mode="widthFix"></image>
								</view> -->
							</view>
						</view>
					</view>
					<u-loadmore v-if='loading' :status="loading ? 'loading' : 'normal'" :load-text='{
						"loadmore": "轻轻上拉",
						"loading": "全力加载中~",
						"nomore": ""
					}'/>
					<view class='seat'></view>
				</view>
				<!-- <view class='shops empty imgPublic' v-else>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageHeader:getApp().globalData.pageHeader,
				pageStatus:getApp().globalData.pageStatus,
				user:{auth_status:'-1'},
				mainHeight:0,
				
				kindList:[],
				page:1,
				canLoad:false,
				loading:false,
				kw:'',
				sel_firstKind:{},
				sel_secondKind:{},
				shops:[],
				kindFlag:false,
				
				orderby:'normal',
				ordertype:'desc',
			}
		}, 
		onLoad(){
			this.mainHeight = uni.getSystemInfoSync().windowHeight - this.pageHeader;
		},
		onShow(){
			this.initKind();
			if(getApp().globalData.isLogin){
				this.initUser();
			}
		},
		onShareAppMessage() {
			return {
				title:'加一精选',
				path:'/pages/seller?shareId='+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):''),
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			let share = {
				title:'加一精选',
				path:'/pages/seller?shareId='+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):''),
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			// 加载更多
			loadMore(event){
				console.log(event);
				if(this.canLoad){
					this.loading = true;
					this.canLoad = false;
					this.page += 1;
					this.initKindShop();
				}
			},
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						this.user = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 修改排序
			changeSort(sort){
				this.orderby = sort;
				if(sort == 'price'){
					this.ordertype = this.ordertype == 'desc' ? 'asc' : 'desc';
				}else{
					this.ordertype = 'desc';
				}
				this.initKindShop();
			},
			// 选择一级分类
			change_firstKind(kind){
				this.sel_firstKind = kind;
				this.sel_secondKind = "";
				// this.kw = '';
				this.page = 1;
				this.initKindShop();
			},
			// 选择二级分类
			change_secondKind(kind){
				this.kw = '';
				this.page = 1;
				this.sel_secondKind = kind;
				this.initKindShop();
			},
			// 获取分类商品
			initKindShop(){
				if(this.page == 1){
					this.shops = [];
					uni.showLoading({
						title:'加载中...'
					})
				}
				this.tool.getData('/api/mall/getGoodsList',{
					id:this.sel_secondKind.id?this.sel_secondKind.id:this.sel_firstKind.id,
					keyword:this.kw?this.kw:'',
					page:this.page,
					size:10,
					is_top:'1',
					orderby:this.orderby, 
					ordertype:this.ordertype,
				}).then(res=>{
					uni.hideLoading()
					if(res){
						this.shops = this.page == 1 ? res : this.shops.concat(res);
						this.canLoad = res.length >= 10 ? true : false;
					}
					this.loading = false;
				}).catch(err=>{
					console.log(err);
				})
			},
			initKind(){
				this.tool.getData('/api/mall/getAllCategory',{}).then(res=>{
					if(res){  
						this.kindList = res.length ? res : [];
						let actKind = uni.getStorageSync('actKind');
						let banner_kind = uni.getStorageSync('banner_kind')?uni.getStorageSync('banner_kind'):'';
						if(actKind){
							this.sel_firstKind = res.find((item)=>{return item.id == actKind});
							uni.removeStorageSync('actKind');
						}else if(banner_kind){
							let kind = banner_kind.split(',');
							this.sel_firstKind = res.find((item)=>{return item.id == kind[0]});
							if(kind[1]){
								this.sel_secondKind = this.sel_firstKind.twoCategory.find((item)=>{return item.id == kind[1]});
							}
							uni.removeStorageSync('banner_kind');
						}else{
							this.sel_firstKind = res.length ? res[0] : {};
						}
						this.initKindShop();
					}
				}).catch(err=>{
					console.log(err); 
				})
			},
			// 查看商品详情
			lookDetail(id,type){
				uni.navigateTo({
					url:'/seller/shopDetail?actType='+type+'&id='+id
				})
			},
		},
	}
</script>

<style lang="scss">
	.kind{
		.container{
			.content{
				width:calc(100% - 184rpx);
				height:100%;
				overflow: auto;
				.shops{
					width:100%;
					padding:0 12px;
					box-sizing: border-box;
					.shopOne{
						.shopInfo{
							.prices{
								.addCarIcon{
									width:20px;
									height: 20px;
								}
								.price{
									font-size:12px;
									color:#FE5300;
									text{
										font-size: 14px;
									}
								}
							}
							.haoping{
								font-size: 12px;
								margin-bottom: 6px;
								color:#FE5300;
							}
							.name{
								width:100%;
								word-break: break-all;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								margin-bottom: 6px;
							}
							width: calc(100% - 92px);
						}
						.shopImg{
							width:80px;
							height:80px;
							border-radius: 4px;
							overflow: hidden;
							position: relative;
							margin-right: 12px;
						}
						width:100%;
						padding-bottom: 5px;
						margin-bottom: 10px;
					}
					width:100%;
				}
				.sortTool{
					.sortOne{
						width:30%;
						font-size:12px;
						text-align: center;
					}
					.sortOne.actSort{
						color:#FE5300;
					}
					width:100%;
					padding:12px;
					box-sizing: border-box;
				}
				.tools{
					.toolList{
						.fenlei{
							display: inline-block;
							width: max-content;
							font-size: 12px;
							background: #e9ecf1;
							padding:4px 8px;
							margin-right: 5px;
							border-radius: 4px;
						}
						.fenlei.actFL{
							color:#FE5300;
							background: rgba(254, 83, 0, 0.2);
						}
						overflow: hidden;
						overflow-x: auto;
						padding: 5px 0 5px 5px;
						height: 35px;
						width:calc(100% - 40px);
						white-space: nowrap;
						box-sizing: border-box;
					}
					.toolList::-webkit-scrollbar{
						height: 0;
					}
					.arrowIcon{
						width:40px;
						height:35px;
					}
					border-bottom: 1px solid #f8f8f8;
				}
				.tools.showAll .toolList{
					white-space: unset;
					height:auto;
				}
				.showAll .fenlei{
					margin-bottom: 5px;
				}
			}
			.zhonglei{
				.kindOne{
					width:100%;
					text-align: center;
					padding:15px 0;
					position:relative;
					font-size:13px;
				}
				.kindOne.actKind{
					background: white;
					color:#FE5300;
				}
				.kindOne.actKind::before{
					content:"";
					width:3px;
					height:80%;
					background: #FE5300;
					position: absolute;
					top:10%;
					left:0;
				}
				width:184rpx;
				height: 100%;
				overflow: auto;
				background: #e9ecf1;
			}
			.zhonglei::-webkit-scrollbar{
				width:0;
			}
			overflow: hidden;
			padding-top:12px;
			box-sizing: border-box;
		}
		height: 100%;
		overflow: hidden;
	}
	.pageHeader{
		.search{
			width:65vw;
			padding:6px 12px;
			box-sizing: border-box;
			background: #F2F2F2;
			border-radius: 50px;
			position: relative;
		}
		.clearable{
			position: absolute;
			right:12px;
			top:6px;
			display: block;
			line-height: 24px;
			z-index:10;
		}
	}
	page{
		height: 100%;
		background: white;
	}
</style>